<!DOCTYPE html>
<html>
<head>
<style>
#flux{width:200px;height:150px;overflow:auto;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    $('#flux').bind('scroll', function(){
        	if($(this).scrollTop() + $(this).innerHeight() == $(this)[0].scrollHeight)
        	{
            	alert('end reached');
            	$("#flux").append(" <b>Pretium Donec felis dolor penatibus <br></b>.");
            }
    	})
	});
</script>

</head>
<body>
<div id="flux">
Lorem ipsum dolor sit amet <br>
Consectetuer augue nibh lacus at <br>
Pretium Donec felis dolor penatibus <br>
Phasellus consequat Vivamus dui lacinia <br>
Ornare nonummy laoreet lacus Donec <br>
Ut ut libero Curabitur id <br>
Dui pretium hendrerit sapien Pellentesque <br>
</div>
</body>
</html>
